import React from 'react';
import { Tabs, Spin, Button } from 'antd';
import RulePane from './Pane';
import { observer } from 'mobx-react';
import { WeaLocaleProvider } from 'ecCom';
import { ruleTypes } from '../../../../constants/form';
import './Main.less';

const { TabPane } = Tabs;
const { FIELD, JUMP } = ruleTypes;
const { getLabel } = WeaLocaleProvider;

@observer
export default class FromRule extends React.Component {
  componentDidMount() {
    const { appid, store } = this.props;

    store.init(appid);
  }

  componentWillUnmount() {
    this.props.store.initState();
  }

  render() {
    const { store, onSave, isSaving } = this.props;
    const { type, hasInit, onTypeChange, rules, isShowSaveButton } = store;
    const operation = (
        !isShowSaveButton ? null :
        (<div className="rule-btns">
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ecgp8j`} type="primary"
              icon={isSaving && 'loading'}
              onClick={onSave}
            >
              {getLabel(503911, '保存规则')}
            </Button>
        </div>)
    );
    const tabs = (
        <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@0jjryy`}
          tabBarExtraContent={operation}
          defaultActiveKey={FIELD}
          activeKey={type}
          onChange={onTypeChange}
        >
            <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@xbzobm`} tab={getLabel(32827, '字段规则')} key={FIELD} >
                {hasInit && <RulePane ecId={`${this && this.props && this.props.ecId || ''}_RulePane@l03cu3`} key={type} {...this.props} />}
            </TabPane>
            <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@gxjucv`} tab={getLabel(503916, '跳转规则')} key={JUMP} >
                {hasInit && <RulePane ecId={`${this && this.props && this.props.ecId || ''}_RulePane@p28ynm`} key={type} {...this.props} />}
            </TabPane>
        </Tabs>
    );

    return (
        <div className="wea-edc-form-rule-wrapper">
            {!hasInit ? <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@dsmj7d`} spinning={!hasInit}>tabs</Spin> : tabs }
        </div>
    );
  }
}
